<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<title>最新动态--东西互联网</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/muiicon.css" />
    <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="css/default.css" />
</head>
	<body>
			<div class="page">
				<header class="mui-bar mui-bar-nav" >
					 <a href="javascript:history.back();"  class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span> <span class="title"> </span></span>
					</a>
					<h1 class="mui-title" id="title">最新动态</h1>
				</header>
				<div class="mui-content">
					<!-- 产品列表  -->
					<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media">
									<a href= "news_view.html">
										<img class="mui-media-object mui-pull-left" src="img/category_feicui.jpg">
										<div class="mui-media-body">
											水贝珠宝电子商务首挑大梁 
											<p class='mui-ellipsis'>水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
											<p class="news-time">2015.11.29</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href= "news_view.html">
										<img class="mui-media-object mui-pull-left" src="img/category_feicui.jpg">
										<div class="mui-media-body">
											水贝珠宝电子商务首挑大梁 
											<p class='mui-ellipsis'>水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
											<p class="news-time">2015.11.29</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href= "news_view.html">
										<img class="mui-media-object mui-pull-left" src="img/category_feicui.jpg">
										<div class="mui-media-body">
											水贝珠宝电子商务首挑大梁 
											<p class='mui-ellipsis'>水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
											<p class="news-time">2015.11.29</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href= "news_view.html">
										<img class="mui-media-object mui-pull-left" src="img/category_feicui.jpg">
										<div class="mui-media-body">
											水贝珠宝电子商务首挑大梁 
											<p class='mui-ellipsis'>水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
											<p class="news-time">2015.11.29</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href= "news_view.html">
										<img class="mui-media-object mui-pull-left" src="img/category_feicui.jpg">
										<div class="mui-media-body">
											水贝珠宝电子商务首挑大梁 
											<p class='mui-ellipsis'>水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
											<p class="news-time">2015.11.29</p>
										</div>
									</a>
								</li>
							</ul>
					<!-- end 产品列表  -->
				</div>
			</div>
		<nav id="searchCategory" style="width: 90%;">
			<div id="app">
					<h5>产品系列</h5>
					<span  class="mui-icon mui-icon-closeempty mui-pull-right search-category-close"></span>
					 <div class="search-category-list">
		                  <div class="search-category-item active"><a href="#">钻 石</a></div>
		                  <div class="search-category-item"><a href="#">彩 宝</a></div>
		                  <div class="search-category-item"><a href="#">珍 珠</a></div>
		                  <div class="search-category-item"><a href="#">翡 翠</a></div>
		          	 </div>
				<ul style="clear: both; ">
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-1" class="mm-arrow">钻石大小</a>
						<div id="search-cate1-1" class="Panel">
							<ul class="search-category-sublist">
								<li><span>2ct以上</span></li>
								<li><span>2ct</span></li>
								<li><span>1.5ct</span></li>
								<li><span>1ct</span></li>
								<li><span>0.9ct</span></li>
								<li><span>0.8ct</span></li>
							</ul>
					</div>
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-2" class="mm-arrow">主石大小</a>
						<div id="search-cate1-2" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-3" class="mm-arrow">珍珠大小</a>
						<div id="search-cate1-3" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-4" class="mm-arrow">石头形状</a>
						<div id="search-cate1-4" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-5" class="mm-arrow">款式</a>
						<div id="search-cate1-5" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>戴妃</span></li>
								<li><span>戴妃</span></li>
								<li><span>戴妃</span></li>
							</ul>
						</div>	
					</li>
				</ul>
			</div>
			<a id="btnSearch"  class="mui-btn mui-btn-danger" ><span class="btn mui-icon mui-icon-search"></span>查询</a>
		</nav>	
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.mmenu.min.all.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
		<script>
			 $(function(){
			 	/**
			 	 * 初始化筛选选项
			 	 */
		 		$("#searchCategory").mmenu({
					extensions: ["theme-white","pagedim-black"],//,"fullscreen"
					offCanvas: {
			               position  : "right",
			               zposition : "front"
		           },
					slidingSubmenus:false,
					navbar		: {
						title	: "筛选条件"
					} 
				});
			 	/*选中与取消*/
		 	 	$(".search-category-sublist li").on('click',function(){
		 	 			var m = $(this).parent().parent().parent();
		 	 			if($(this).hasClass("active")){
		 	 				m.find(".mm-counter").text("");
		 	 				$(this).removeClass("active");
		 	 			}else{
		 	 				var text=$(this).find('span').text();
			 	 			m.find(".mm-counter").text(text);
			 	 			$(this).addClass("active");
			 	 			$(this).siblings(".active").removeClass("active");
			 	 			m.find(".mm-arrow").click();
		 	 			}
		 	 	});
		 	 	$("#searchCategory .search-category-close").click(function(){
		 	 		$("#searchCategory").data( "mmenu" ).close();
		 	 	});
			 	 /*点击搜索按钮*/
			 	 $("#btnSearch").on('click',function(){
			 	 	$("#searchCategory").data( "mmenu" ).close();
			 	 		//TODO  提交查询参数
			 	 });
			 })
		</script>
	</body>
</html>
